
body[data-type^='appearance'] {

  > div.colorMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }

  > section#wrapper > main {

    div.boxWrapper {
      max-width: 820px;

      @media (max-width: 1500px) {
        display: block;
      }

      > div.box {
        max-width: 400px;

        label, input[type='range'], select, input.color, input.color + span {
          margin-bottom: 5px;
        }

        a.revert {
          @include mask('icon-update', $textColorLight, 24px);
          position: absolute;
          display: block;
          top: 12px;
          right: 16px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          transform: rotateY(180deg);
        }

        &.surface {

          > div.checkbox {
            @include mask('settings/icon-light', $textColorInverted, 20px);
            border-radius: 15px;
            height: 30px;
            width: 60px;
            background: linear-gradient(to right, #fec171 0%, #ff6c69 100%);
            transition: width 0.3s;

            &::before {
              -webkit-mask-position-x: 32px;
              transition: -webkit-mask 0.3s;
            }

            &::after {
              content: "";
              position: absolute;
              top: 3px;
              left: 3px;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background: $textColorInverted;
              box-shadow: none;
              opacity: 0.7;
              -webkit-mask: none;
              transition: transform 0.3s, opacity 0.3s;
            }

            &.active {
              background: linear-gradient(to right, #3c5fe1 0%, #3a2b96 100%);

              &::before {
                @include maskImage('settings/icon-dark');
                -webkit-mask-position-x: 6px;
              }

              &::after {
                transform: translate3d(30px, 0, 0);
                opacity: 0.9;
              }
            }
          }

          &[data-type='auto'] > div.checkbox {
            pointer-events: none;
            width: 50px;

            &::before {
              -webkit-mask-position-x: center !important;
            }

            &::after {
              display: none;
            }
          }

          > div.sub {
            padding-top: 10px;
          }
        }
      }
    }

    div.contentBox {
      max-width: 820px;
    }

    div.selectedTheme {
      @include mask('settings/icon-theme', $textColor, 20px);
      position: relative;
      display: inline-block;
      margin: 17px 0 8px;
      color: $textColor;
      font-weight: $__fontWeightBold;
      cursor: pointer;

      > span {
        position: relative;
        display: block;
        padding: 10px 14px 10px 42px;
        background: $contentBackground;
        border-radius: 9px;
        z-index: 2;
        transition: margin 0.2s, padding 0.2s;
      }

      &::after {
        content: "";
        position: absolute;
        top: -4.5px;
        left: -5px;
        width: calc(100% + 10px);
        height: calc(100% + 9px);
        border-radius: 14px;
        background: $gradient;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      }

      &::before {
        width: 36px;
        z-index: 3;
        transition: background-color 0.2s, transform 0.3s;
      }

      &:hover {

        > span {
          padding-left: 14px;
          margin-left: 40px;
        }

        &::before {
          transform: scale(1.4, 1.4);
          background: $textColorInverted;
        }
      }
    }

    a.showThemes {
      @include mask('icon-add', $textColor, 18px);
      position: relative;
      display: inline-block;
      color: $textColor;
      font-weight: $__fontWeightMedium;
      padding: 3px 5px 3px 22px;
      margin-top: 16px;
      font-size: 100%;
      cursor: pointer;

      &::before {
        -webkit-mask-position-x: left;
      }
    }

    div.themeList {
      @include mask('settings/icon-theme', rgba(255, 255, 255, 0.2), 120px);
      background: rgba($mainColor2, 0.5);
      padding-bottom: 30px;
      transform: translate3d(0, -10px, 0);
      opacity: 0;
      margin-top: 20px;
      transition: opacity 0.3s, transform 0.3s;

      &.visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      &::before {
        top: unset;
        left: unset;
        right: 32px;
        bottom: 35px;
        width: 120px;
        height: 120px;
        pointer-events: none;
      }

      &::after {
        content: "";
        position: absolute;
        top: -30px;
        left: 35px;
        width: 0;
        height: 0;
        border: 15px solid transparent;
        border-bottom-color: rgba($mainColor2, 0.5);
      }

      > h2 {
        color: $textColorInverted;
        margin: 10px 0 30px;
      }

      > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 25px;

        > li {
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
          background: $contentBackground;

          > img {
            display: block;
            width: 100%;
          }

          > div.caption {
            position: relative;
            padding: 0 10px 8px 10px;

            &::before {
              content: "";
              position: absolute;
              top: -25px;
              left: 0;
              width: 100%;
              height: 25px;
              background: linear-gradient(to bottom, transparent 0%, $contentBackground 100%);
            }

            > h3 {
              font-size: 120%;
              font-weight: $__fontWeightMedium;
            }

            > p {
              font-size: 90%;
              margin: 5px 0 0 0;
            }

            > a {
              @extend %button;
              background: $mainColor2;
              font-size: 90%;
              margin-top: 10px;
              padding: 4px 12px;
            }

            > span.active {
              display: block;
              margin-top: 5px;
              font-weight: 400;
              font-style: italic;
              color: $colorSuccess;
            }
          }
        }
      }

      p.premium {
        color: $textColorInverted;
        background: rgba($contentBackground, 0.2);
        box-shadow: 0 0 0 20px rgba($contentBackground, 0.2);
        margin: 40px 0 50px;

        &::before {
          background-color: $textColorInverted;
        }

        > a {
          color: rgba($textColorInverted, 0.8);
        }
      }
    }

    div.presets {

      > p {
        margin: 10px 0;
      }

      > a {
        display: inline-block;
        padding: 2px 15px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        margin: 10px 7px 0 0;
        cursor: pointer;
        transition: background 0.5s;

        &::before {
          content: attr(data-type);
          text-transform: uppercase;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.07);
        }
      }
    }

    div.iconColorWrapper {

      ~ p.note {
        @include mask('icon-info', $textColorLight, 32px);
        position: relative;
        display: none;
        line-height: 150%;
        padding: 3px 0 3px 40px;
        margin-top: 12px;

        &::before {
          top: 8px;
          left: 0;
          width: 32px;
          height: 32px;
        }
      }

      &.hidden {
        display: none;

        ~ p.note {
          display: block;
        }
      }
    }

    div[data-name='sidebar'] ul.radioWrapper > li {
      display: inline-block;

      + li {
        margin-left: 30px;
      }
    }
  }
}

iframe[data-appearance] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  z-index: 4;
}

iframe[data-appearance='overlay'] {
  width: 700px;
  height: 650px;
  transform-origin: top right;

  @media (max-width: 1400px) {
    transform: scale(0.8);
  }

  @media (max-width: 1280px) {
    transform: scale(0.7);
  }
}

@media (min-width: 1200px) {
  body[data-type='appearance_general'] > iframe[data-appearance='general'],
  body[data-type='appearance_sidebar'] > iframe[data-appearance='sidebar'],
  body[data-type='appearance_indicator'] > iframe[data-appearance='indicator'],
  body[data-type='appearance_overlay'] > iframe[data-appearance='overlay'] {
    display: block;
  }
}

@import "../../rtl/include/settings/appearance";